<template>
	<view class="container">
		<view class="box-form">
			<u--form
			labelPosition="left"
			:model="user"
			:rules="rules"
			ref="uForm">
				<u-form-item
					labelWidth="0"
					label=""
					prop="nickname">
					<u--input prefixIcon="account" prefixIconStyle="font-size: 22px;color: #909399" v-model="user.nickname" placeholder="昵称"></u--input>
				</u-form-item>
				<u-form-item
					labelWidth="0"
					label=""
					prop="email">
					<u--input prefixIcon="email" prefixIconStyle="font-size: 22px;color: #909399" v-model="user.email" placeholder="电子邮箱"></u--input>
				</u-form-item>
			</u--form>
			<u-button @click="signIn" color="#c00000" class="box-sign-in" loadingMode="semicircle" :loading="loading" loadingText="更改中..." loadingSize="60">更 改</u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import { userinfoLode , updateUserinfo } from '@/api/getList.js';
	export default {
		data() {
			return {
				loading: false,
				user: {
					nickname: "",
					email: ""
				},
				rules: {
					'nickname': {
						type: 'string',
						required: true,
						message: '请输入昵称',
						trigger: ['blur', 'change']
					},
					'email': {
						type: 'string',
						required: true,
						message: '请输入电子邮箱',
						trigger: ['blur', 'change']
					}
				}
			}
		},
		onShow() {
			this.getUserinfo();
		},
		created() {
			
		},
		methods: {
			async getUserinfo(){
				const { data } = await userinfoLode({});
				data.email = data.email || "";
				data.nickname = data.nickname || "";
				this.user = data;
			},
			// 注册
			signIn(){
				this.$refs.uForm.validate().then(async res => {
					this.loading = true;
					const data = await updateUserinfo(this.user);
					this.$refs.uToast.show({ message: data.message });
					this.loading = false;
					this.getUserinfo();
				}).catch(errors => {
					this.loading = false;
				});
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		box-sizing: border-box;
		padding: 0 40rpx;
		min-height: calc(100vh);
		background-color: #FFFFFF;
	}
	.box-form {
		padding-top: 15vh;
	}
	.box-sign-in {
		height: 70rpx;
		margin-top: 20rpx;
	}
</style>
